<template>
  <div class="productlist">
     <div class="product" v-for="(item, index) in resultlist" :key="index">
        <img id="img" :src="item.img" alt="" @click="skip(item.id)">
        <p>{{item.name}}</p>
        <div class="price">
            <p class="price_goods">{{ item.price/100 }}￥</p>
            <p><img style="width:18px" src="../assets/imgs/爱心.png" alt="">{{item.sale}}</p>
        </div>
     </div>
  </div>
</template>

<script>
export default {
   props:{
       resultlist:Array,
   },
   data() {
       return {
           
       }
   },
   methods: {
    skip(id) {
      this.$router.push({ name: "Detail", query: { id: id } });
    },
   },
}

</script>
<style lang="scss" scoped>
 .productlist{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-top: 8px;
    .product{
        display: flex;
        width: 46vw;
        flex-direction: column;
        padding: 0 2vw;
        margin: 0 auto;
        #img{
            width: 100%;
            border-radius: 0.1rem;
        }
        p{
            display: -webkit-box;  //超出文字部分用... 表示
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: 0.24rem;
            padding:0 0.3rem;
            margin-top: 0.1rem;
        }
        .price{
            display: flex;
            justify-content: center;
            margin: -0.1rem 0rem 0.1rem 0rem;
            .price_goods{
                color: #FF6347;
            }
        }
    }
 }
</style>